<template>
    <!-- （收到邮件、发送的邮件、写新的邮件）按钮 -->
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-download"
                    size="mini"
                >收到的邮件</el-button>
            </el-col>
        </el-row>

        <el-table :data="list">
            <el-table-column label="编号" width="55" align="center" prop="emailId"/>
            <el-table-column label="发送人" width="180" align="center" prop="userId"/>
            <el-table-column label="标题"  align="center" prop="topic"/>
            <el-table-column label="发送时间" width="195" align="center" prop="sendTime"/>
            <el-table-column label="是否已读" width="90" align="center" prop="isRead"/>
            <el-table-column label="操作" width="220" align="center" prop="emailId">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleView(scope.row,scope.index)"
                    >详细</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="emailList.pageNum"
            :limit.sync="emailList.pageSize"
            @pagination="getList"
        />
        <el-dialog title="收到的邮件详情" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="detailedEmail" label-width="100px" size="mini">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="标题：">{{detailedEmail.topic}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="发送人：">{{detailedEmail.userId}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="发送时间：">{{detailedEmail.sendTime}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="邮件内容：">{{detailedEmail.content}}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {receivedEmailList,readEmail,deleteEmail} from "@/api/my_home_page/my_email/email";
export default {
    name:"me_email",
    data(){
        return{
            open:false,
            list:[],
            emailIds:[],
            total:0,
            emailList:{
                pageNum:1,
                pageSize:10
            },
            detailedEmail:{}
        }
    },
    created(){
        this.getList();
    },
    methods:{
        getList(){
            receivedEmailList(this.emailList).then( response => {
                this.list = response.rows;
                this.total = response.total;
            });
        },
        handleView(row){
            this.open = true;
            this.detailedEmail = row;
            var emailId = this.detailedEmail.emailId;
            // console.log(row)
            // console.log(index)
            // console.log(this.detailedEmail)
            readEmail(emailId);
            this.getList();
        },
        handleDelete(row){
            console.log(row)
            var emailId = row.emailId || this.emailIds;
            this.$modal.confirm('是否确认删除收到的编号为' + emailId + '邮件的数据项？删除后将无法恢复！！！').then(function(){
                return deleteEmail(emailId);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess('删除成功！！')
            }).catch(() => {});
        }
    }
};
</script>
